<template>
  <div class="app-container home">

    <el-row :gutter="20">

      <el-col :sm="24" :lg="12" style="padding-left: 20px; background-color: #304156; color: #fff; padding: 30px; position: relative; border-radius: 4px">
        <h2 style="font-size: 32px; font-weight: bold; margin-bottom: 20px;">东海帝皇管理系统</h2>
        <div style="position: absolute; bottom: 10px; right: 30px; text-align: right; color: #ebb563">
          <p style="font-size: 18px; line-height: 1.6;">
            无败的陨落,奇迹的复活!
          </p>
        </div>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="12">
            <h2>技术选型</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <h4>后端技术</h4>
            <ul>
              <li>SpringBoot</li>
              <li>Spring Security</li>
              <li>JWT</li>
              <li>MyBatis</li>
              <li>Druid</li>
              <li>Fastjson</li>
              <li>...</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>前端技术</h4>
            <ul>
              <li>Vue</li>
              <li>Vuex</li>
              <li>Element-ui</li>
              <li>Axios</li>
              <li>Sass</li>
              <li>Quill</li>
              <li>...</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>

    </el-row>
    <el-row :gutter="20" style="margin-top: 40px">
      <el-col :span="12">
         <el-card>
           <div style="float: right ;width: 160px" >
             <el-form-item label="商品" style="position: relative;width: 160px; float: right; z-index: 999 !important">
               <el-select v-model="queryParams.fid" placeholder="请选择商品" clearable @change="getOption">
                 <el-option
                     v-for="item in  fGroup"
                     :key="item.fid"
                     :label="item.food"
                     :value="item.fid"
                 />
               </el-select>
             </el-form-item>
           </div>
           <div style="height: 400px" id="main"></div>
         </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div style="float: right " >
            <el-form-item label="日期" prop="date"  style="position: relative;float: right; z-index: 999 !important">
              <el-date-picker clearable
                              @change="getOption2"
                              v-model="queryParams2.sellTime"
                              type="date"
                              value-format="YYYY-MM-DD"
                              placeholder="请选择盘点日期" >
              </el-date-picker>
            </el-form-item>
          </div>
          <div style="height: 400px" id="main2"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-divider />

  </div>
</template>

<script setup name="Index">
  import * as echarts from 'echarts';
  import { onMounted } from 'vue';
  import {listDayIncome} from "@/api/shop/dayIncome";
  import {listFood} from "@/api/shop/food";

  import {listSell} from "@/api/shop/sell";

  let myChart;
  let myChart2;
  const dayIncomeList = ref([]);
  const fGroup = ref([]);
  const purchaseList = ref([]);
  const data = reactive({
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      date: null,
      fid: 1,
    },
    queryParams2: {
      pageNum: 1,
      pageSize: 10,
      sellTime: "2024-06-01"
    },
  });

  const { queryParams,queryParams2} = toRefs(data);
  function getOption(){
    const option = {
      title: {
        text: "利润变化"
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['利润', '进货', '出货'],
        left:'20%'
      },
      xAxis: {
        type: 'category',
        data: []
      },

      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: "利润",
          data: [],
          type: 'line',
          smooth: true
        },
        {
          name: "进货",
          data: [],
          type: 'line',
          smooth: true
        },
        {
          name: "出货",
          data:  { value: null, name: 'null' },
          type: 'line',
          smooth: true
        }
      ]
    }
    listDayIncome(queryParams.value).then(response => {
      dayIncomeList.value = response.rows.map(item => {
        const balance = parseFloat(item.sellIncome)-parseFloat(item.purchaseIncome)
        return { ...item, balance}
      })
      option.series[0].data = dayIncomeList.value.map(item => item.actualIncome);
      option.series[1].data = dayIncomeList.value.map(item => item.purchaseIncome);
      option.series[2].data = dayIncomeList.value.map(item => item.sellIncome);
      option.xAxis.data=dayIncomeList.value.map(item => item.date)

      console.log(option.series[0].data)
      console.log(option.xAxis.data)
      myChart.setOption(option);
    })
  }

  function getOption2(){
    const option2 = {
      title: {
        text: "每日商品销售额"
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient:'vertical',
        top: '10%',
        left:'left'
      },
      series: [
        {
          name: '本日销量',
          type: 'pie',
          radius: ['40%', '60%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }

      ]

    };

    listSell(queryParams2.value).then(response => {
      purchaseList.value = response.rows;
      console.log(purchaseList.value)
      option2.series[0].data = purchaseList.value.map(item => ({
        value: item.totalPrice,
        name: item.foodName
      }));
      console.log('option2.value.series[0].data:', option2.series[0]);
      myChart2.setOption(option2);

    });



  }

  onMounted(() => {
    listFood().then(response =>{
      fGroup.value=response.rows;
      getOption()
      getOption2()

    })
    const chartDom = document.getElementById('main');
    const chartDom2 = document.getElementById('main2');
    myChart = echarts.init(chartDom);
    myChart2 = echarts.init(chartDom2);

});

</script>


<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

}
</style>

